<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">激光打印机</a>
</h3>
<div id="users">
   </el-dialog>
    <el-row>
        <el-input v-model="input"  placeholder="请输入内容" style="width: 280px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="chaxun">查询</el-button><br>
        <el-button type="warning"  @click="dialogFormVisible = true" >添加打印机</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delAll">批量删除</el-button>
    </el-row>
    <el-dialog title="添加打印机信息" :visible.sync="dialogFormVisible" @close="closeDialog">
<!--        和user对象对应-->
        <el-form :model="tprinter">
            <el-form-item label="打印机编号">
                <el-input v-model="tprinter.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器">
                <el-input v-model="tprinter.pserver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="tprinter.pdesctib" autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item label="可打型号">-->
<!--                <el-input v-model="tprinter.pDesctib" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="IP地址">
                <el-input v-model="tprinter.pip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="责任产线">
                <el-input v-model="tprinter.pline" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="tprinter.premark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="warning" @click="saveUsers">确 定</el-button>
        </div>
    </el-dialog>
    <!--:data="users"接收集合-->
    <el-table
            @select="selectTable"
            ref="tprinterTable"
            :data="printers"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="打印机编号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <!--scope.row.id 固定搭配-->
                <span style="margin-left: 10px">{{ scope.row.pnum }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="服务器"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pserver }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="描述"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pdesctib }}</span>
            </template>
        </el-table-column>
<!--        <el-table-column-->
<!--                label="可打型号"-->
<!--                width="180">-->
<!--            <template slot-scope="scope">-->
<!--                <i class="el-icon-time"></i>-->
<!--                <span style="margin-left: 10px">{{ scope.row.pdesctib }}</span>-->
<!--            </template>-->
<!--        </el-table-column>-->
        <el-table-column
                label="IP地址"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pip }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="责任产线"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pline }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.premark }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm
                        @confirm="handleDelete(scope.$index, scope.row)"
                        title="确定删除吗？">
                    <el-button
                            size="mini" type="danger"
                            slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
<!--    //分页的下角标-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="currentChange">
    </el-pagination>
</div>


<script>
    new Vue({
        el:"#users",
        data(){
            return{
                dialogTreeVisible:false,
                dialogFormVisible:false,
                //集合
                total:0,
                current:1,
                pageSize:10,
                printers: [],
                number:0,
                currentRow:null,
                tprinter:{},
                num: 0,
                // 配置子节点和节点的显示属性//
                defaultProps:{
                    label: 'name'
                },
                selectAll:null,
                input:"",
            }
        },
        methods:{
            // 加载查询全部
            loadFunctions() {
                axios.get("/TPrinters")
                    .then(res => {
                        this.printers = res.data;
                        console.log(this.printers);
                    })
            },
            loadUsers(){
                axios.get("/TPrinterLike/like?current=" + this.current + "&limit="+ this.pageSize +"&pNum="+ this.num)
                    .then(res =>{
                        this.printers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            chaxun(){
                axios.get("/TPrinterLike/like?pNum="+this.input+"&current="+this.current+"&limit="+this.pageSize)
                    .then(res =>{
                        this.printers =res.data.records;
                        this.total=res.data.total;
                        this.current=res.data.current;
                    })
            },
            currentChange(current){
                this.current=current;
                this.loadUsers();
            },
            handleEdit(index, row){
                this.tprinter=JSON.parse(JSON.stringify(row));
                //开模态框
                this.dialogFormVisible=true;
                this.number=1;
            },
            handleDelete(index, row) {
                axios.delete("/TPrinter/" + row.id)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.loadFunctions();
                        }
                    })
            },
            delAll() {
                let ids=new Array();
                this.selectAll.forEach(select=>{
                    console.log(select.id)
                    ids.push(select.id)
                })
                axios.delete("/TPrinters/" + ids)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.loadFunctions();
                        }
                    })
            },
            selectTable(selection){
                this.selectAll=selection;
            },

            //关闭模态框时 清空数据
            closeDialog(){
                this.tprinter =  {id:0,pnum:"",pserver:"",pdesctib:"",pip:"",pline:"",premark:""}
            },
            saveUsers(){
                let u = JSON.parse(JSON.stringify(this.tprinter));
                console.log(u)
                if(this.number == 0){
                    axios.post("/TPrinter",u)
                        .then(res =>{
                            if(res.data=="ok"){
                                this.dialogFormVisible=false;
                                this.loadFunctions();
                            }
                        });
                }else{
                    axios.put("/TPrinter",u)
                        .then(res =>{
                            if (res.data == "ok"){
                                this.dialogFormVisible=false;
                                this.loadUsers();
                            }
                        })
                }
            },
        },
        mounted(){
            this.loadUsers();
        }
    })
</script>
</body>
</html>